@ANDROID5_SLIDER_RADIUS: 50%;
@ANDROID5_SLIDER_BAR_HEIGHT: 2px;
@ANDROID5_SLIDER_HANDLE_SIZE: 32px;
@ANDROID5_SLIDER_HANDLE_ACTIVE_BORDER_WIDTH: 2px;
@ANDROID5_SLIDER_HANDLE_INNER_SIZE: 12px;
@ANDROID5_SLIDER_HANDLE_INNER_BORDER_WIDTH: 1px;
@ANDROID5_SLIDER_HANDLE_INNER_DISABLED_SIZE: 2px;
@ANDROID5_SLIDER_WRAPPER_HEIGHT: 32px;

.dx-slider-wrapper {
    height: @ANDROID5_SLIDER_WRAPPER_HEIGHT;
}

.dx-slider-bar, .dx-slider-range {
    margin-top: (@ANDROID5_SLIDER_WRAPPER_HEIGHT - @ANDROID5_SLIDER_BAR_HEIGHT) / 2;
    height: @ANDROID5_SLIDER_BAR_HEIGHT;
}

.dx-slider-bar {
    margin-right: @ANDROID5_SLIDER_HANDLE_SIZE / 2 + @ANDROID5_SLIDER_HANDLE_ACTIVE_BORDER_WIDTH;
    margin-left: @ANDROID5_SLIDER_HANDLE_SIZE / 2 + @ANDROID5_SLIDER_HANDLE_ACTIVE_BORDER_WIDTH;
    background: @ANDROID5_SLIDER_BAR_BACKGROUND;
}

.dx-slider-range {
    top: @ANDROID5_SLIDER_BAR_HEIGHT / 2 - @ANDROID5_SLIDER_HANDLE_SIZE / 2;

    &.dx-slider-range-visible {
        background: @ANDROID5_SLIDER_BACKGROUND;
    }
}

.dx-slider-handle {
    margin-top: @ANDROID5_SLIDER_BAR_HEIGHT / 2 - @ANDROID5_SLIDER_HANDLE_SIZE / 2;
    margin-right: -@ANDROID5_SLIDER_HANDLE_SIZE / 2;
    width: @ANDROID5_SLIDER_HANDLE_SIZE;
    height: @ANDROID5_SLIDER_HANDLE_SIZE;
    .border-radius(@ANDROID5_SLIDER_RADIUS);

    &:after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        margin-top: -@ANDROID5_SLIDER_HANDLE_INNER_SIZE / 2;
        margin-left: -@ANDROID5_SLIDER_HANDLE_INNER_SIZE / 2;
        width: @ANDROID5_SLIDER_HANDLE_INNER_SIZE;
        height: @ANDROID5_SLIDER_HANDLE_INNER_SIZE;
        background: @ANDROID5_SLIDER_BACKGROUND;
        content: "";
        .border-radius(@ANDROID5_SLIDER_RADIUS);
    }

    .dx-tooltip-wrapper .dx-popup-content {
        line-height: normal;
    }

    .dx-inkripple-wave {
        background-color: @ANDROID5_SLIDER_ACTIVE;
    }
}

.dx-slider-label-position-bottom {
    .dx-slider-label {
        bottom: -18px;
    }
}

.dx-slider-label-position-top {
    .dx-slider-label {
        top: -15px;
    }
}

.dx-state-disabled {
    &.dx-slider, .dx-slider {
        opacity: 1;

        .dx-slider-handle {
            opacity: 1;
        }
    }

    .dx-slider-range.dx-slider-range-visible {
        background: @ANDROID5_SLIDER_DISABLED_BACKGROUND;
    }

    .dx-slider-handle {
        width: 12px;
        height: 12px;
        margin-top: -5px;
        margin-right: -5px;
        border-radius: 50%;
        border: 2px solid white;

        &:after {
            margin-top: -@ANDROID5_SLIDER_HANDLE_INNER_DISABLED_SIZE / 2 - @ANDROID5_SLIDER_HANDLE_INNER_BORDER_WIDTH - 2px;
            margin-left: -@ANDROID5_SLIDER_HANDLE_INNER_DISABLED_SIZE / 2 - @ANDROID5_SLIDER_HANDLE_INNER_BORDER_WIDTH - 2px;
            width: 8px;
            height: 8px;
            background: grey;
        }

        .dx-overlay-content{
            margin-top: -12px ;
            margin-left: -11px ;
        }
    }
}

.dx-state-active.dx-slider-handle:after {
    .transform(scale(1.3));
}

.dx-rtl {
    .dx-slider-handle {
        margin-left: -@ANDROID5_SLIDER_HANDLE_SIZE / 2;
    }

    &.dx-state-disabled {
        .dx-slider-handle {
            margin-left: -5px;
            margin-right: 0;
        }

        .dx-overlay-content{
            margin-left: -13px ;
        }
    }
}
